/*
  学习目标：
  需求1：✅准备数据、渲染评论列表
  需求2：✅根据id，删除一条数据
  需求3：✅实现发布评论 - 受控组件改造
  需求4：✅实现发布评论
  需求5：✅实现清除评论功能
  
*/
import React from 'react';
import './index.css';

export default class App extends React.Component {
  state = {
    // 用户名输入框
    username: '',
    // 评论内容
    content: '',
    list: [
      {
        id: 1,
        username: '思聪',
        content: '想你的夜',
      },
      {
        id: 2,
        username: '马芸',
        content: '我对钱不感兴趣',
      },
      {
        id: 3,
        username: '王简林',
        content: '实现一个小目标',
      },
    ],
  };

  /* 
    1. 定义删除方法，接收id
    2. 绑定方法调用，传递id
    3. 方法里面把数据过滤掉，注意这里不要改变到原数组
   */
  handleDelById = (id) => {
    // console.log('id -----> ', id);
    // ❌会改变呢原数组，this.state.list.splice()
    // 不能直接修改state的数据，必须通过setState
    const list = this.state.list.filter((v) => v.id !== id);
    this.setState({ list });
  };

  /* 
  受控组件改造
    3.1 通过value绑定表单元素
    3.2 绑定onChange事件修改state的状态
    3.3 建议封装复用函数
    */
  handleChange = (e) => {
    // console.dir(e.target);
    const { name, value } = e.target;
    this.setState({ [name]: value });
  };

  /* 
    发表评论
        4.1 定义方法并且绑定
        4.2 方法里阻止表单默认提交事件
        4.3 把数据新增到list
        4.4 为空时提醒
        4.5 新增后清空数据
  */
  handleAdd = (e) => {
    // console.log('e -----> ', e);
    e.preventDefault();
    // ❌this.state.list.unshift({})
    const { username, content, list } = this.state;
    if (!username || !content) {
      alert('评论人或者内容不能为空');
      return;
    }
    const newList = [
      {
        id: +new Date(),
        username,
        content,
      },
      ...list,
    ];
    this.setState({ list: newList, username: '', content: '' });
  };

  /* 
  清空评论功能
   1. 给清空评论按钮注册事件
   2. 通过setState清空评论列表
   3. 没有更多评论的处理
  */
  handleClear = () => {
    this.setState({ list: [] });
  };

  render() {
    const { username, content, list } = this.state;
    return (
      <div className="app">
        {/* 表单提交的时候，运行发布评论的函数 */}
        <form>
          <input
            className="user"
            type="text"
            placeholder="请输入评论人"
            name="username"
            value={username}
            onChange={this.handleChange}
          />
          <br />
          <textarea
            className="content"
            cols="30"
            rows="10"
            placeholder="请输入评论内容"
            name="content"
            value={content}
            onChange={this.handleChange}
          />
          <br />
          <button onClick={this.handleAdd}>发表评论</button>
          <button type="button" onClick={this.handleClear}>
            清空评论
          </button>
        </form>
        <ul>
          {/* 1. 列表渲染 */}
          {list.length ? (
            list.map((item) => {
              return (
                <li key={item.id}>
                  <h3>评论人: {item.username}</h3>
                  <p>评论内容：{item.content}</p>
                  {/* 2. 调用删除方法，传递id */}
                  <button onClick={() => this.handleDelById(item.id)}>
                    删除
                  </button>
                </li>
              );
            })
          ) : (
            <div>暂无更多</div>
          )}
        </ul>
      </div>
    );
  }
}
